<template>
       <div class="smsLogin">
    <!-- 手机号登录 -->
      
        <el-form-item label="手机号">
          <!-- 两个在一起的空格不能标准的显示在一排上 -->
            <el-input maxlength="11" class="captcha phone" v-model="phoneNumber"></el-input>
            <span @click="sendSms" class="captcha-svg" style="color:#888;font-weight:bolder; 45px; text-decoration: underline">
              {{msg}} 
            </span>
        </el-form-item>
        <el-form-item label="验证码" >
            <el-input v-model="code"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
       
      </el-form-item>
   </div>
</template>


<script>
import * as api from "@/api/users"
export default {
 props:{
  storageUserInfo:{
    type:Function,
    require:true
  }
 },
 data() { 
      return {

        //控制短信验证的倒计时显示
        msg:"点击发送验证码",
        //防止倒计时抖动,设置一个开关
        flag:true,
        //获取手机号码
        phoneNumber:"",
        code:""
      };
    },
    methods: {
      //设置短信验证码倒计时
     async sendSms(){
        // console.log('222');
        if(this.flag){
          //关闭开关
          this.flag = false;
        //声明一个倒计时数字变量
          let delay = 60
          //调用接口，获取手机验证码(一个手机号一天只能发5条验证码，一分钟发送一条，验证码有效时长1小时)
        let res = await api.getSmsCode(this.phoneNumber)
        console.log(res)

        //短信发送成功
        if(res.data.state){
          this.$message({
            type:"success",
            message:'短信发送成功'
          })
        }else{
          this.$message.error(`短信发送失败，${res.data.msg}`)
        }
          this.msg = `${delay}秒后重新发送`
          this.interval = setInterval(()=>{
            delay--
            if(delay<1){
              this.msg = '点击发送验证码'
              clearInterval(this.interval)
              this.flag = true
            }else{
              this.msg = `${delay}秒后重新发送`
            }

          },1000)
        }

      },
     async submit(){
       let res = await  api.smsLogin(this.code)
       console.log(res)
       //调用父组件方法，储存用户信息
       this.storageUserInfo(res.data)
       //跳转页面
       this.$router.push('/')
      }
    }
}
</script>


<style lang="less" scoped>
// 修改element-ui的样式，
// 1.打开调试器，找准类名，覆盖样式
// 2.看权重，使用！important或者自己计算权重
// 3.使用深度选择器，>>>或者/deep/或者v::deep
 .smsLogin{  
    // background: rgba(226, 131, 163, 0.3);
    // border:1px solid rgba(0, 0, 0, .3);
    width: 100%;
    height: 500px;
    display: flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;
    /deep/.el-form-item__label{
        width: 75px !important;
        padding:0 12px 0 ;
        color: #fff !important;
        margin-left: -20px;
        font-size: 16px;
        // font-weight: 900;
    }
    /deep/.el-input{
          margin-left: -46px;
          width: 260px;
        }
     h1{
      color:#fff;
      text-align: center;
      margin:0 0 60px 0;
    }
    /deep/.phone{
      width: 130px;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;//不显示，

    }
    .captcha-svg{
      display: inline-block;
      width: 130px;
      height: 39px;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px; 
      background-color: #fff;
      vertical-align: -1px;
      text-align: center;
      user-select: none;
      cursor: pointer;
    }
       
      .el-button{
        background: linear-gradient(90deg,#1596fb,#002dff);
        width: 260px;
        margin-right: 46px;
    }

  }

  
</style>
